<?php
$this->title = '分类';
$per_url = Yii::$app->params['imgurl'];
$this->registerCssFile('@web/css/dropload.css');
$this->registerCss('
    body{background: #fff;margin:0px;padding:0px;}
    .mui-bar-nav {
        -webkit-box-shadow: unset;
        box-shadow: unset !important;
    }
    .myheader a{color:#333;}
    .zhanwei{width:100%;height:45px;}
    .marklist ul{margin:0px;padding: 0px}
    .marklist ul li{list-style:none;float:left;border:1px solid #333;color:#333;padding:4px 12px;margin-top:15px;margin-right:15px;border-radius:6px;}
    .marklist ul li a{color:#333;text-decoration:none;}
    .marklist .active{background-color:#333;}
    .marklist .active a{color:#fff}
    
    .product-list{margin: 0px 15px 5px 15px;}
    .product-list ul{padding: 0px;margin: 0px}
    .product-list ul li{list-style: none;overflow: hidden;}
    .product-list ul li a{display: block;}
    .product-list li a {
        width: 30%;
        margin-right: 5%;
        float: left;
        text-decoration: none;
    }
    .product-list li a img {
        width: 100%;
        display: block;
        border: 1px solid #E6E6E6;
        border-radius: 6px;
    }
    .product-list li a:nth-child(3n) {
        margin-right: 0;
    }
    .product-list li a h3{
        text-align: center;
        font-size: 12px;
        line-height:32px;
        color:#333;
        margin: 0;
        padding: 0;
        border: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
');
?>
<div id="page-cate" style="margin-bottom: 60px;">

    <header id="myheader" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333;"></a>
        <a href="#menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right" style="color: #333;"></a>
    </header>
    <div class="zhanwei"></div>

    <div class="marklist" style="margin: 0px 15px 15px 15px;">
        <div>
            <ul>
                <li class="<?=($cate == 0)?'active':'';?>"><a href="/touch/default/cate?cate=0&tag=<?=$tag?>"><span>全部</span></a></li>
                <li class="<?=($cate == 2)?'active':'';?>"><a href="/touch/default/cate?cate=2&tag=<?=$tag?>"><span>韩漫</span></a></li>
                <li class="<?=($cate == 1)?'active':'';?>"><a href="/touch/default/cate?cate=1&tag=<?=$tag?>"><span>日漫</span></a></li>
            </ul>
        </div>
        <div class="clearfix"></div>
        <div>
            <ul>
                <li class="<?=($tag == 0)?'active':'';?>"><a href="/touch/default/cate?cate=<?=$cate?>&tag=0"><span>全部</span></a></li>
                <?php foreach($taglist as $v){ ?>
                    <?php if($v['cont'] != '韩漫' && $v['cont'] != '日漫'){?>
                        <li class="<?=($tag == $v['id'])?'active':'';?>"><a href="/touch/default/cate?cate=<?=$cate?>&tag=<?=$v['id']?>"><span><?=$v['cont']?></span></a></li>
                    <?php }?>
                <?php }?>
            </ul>
        </div>
        <div class="clearfix"></div>
    </div>

    <div class="product-list">
        <ul class="product-list-ul">
            <li></li>
        </ul>
        <div class="clearfix"></div>
    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/dropload.min.js"></script>

<script>

    // 上拉加载加载
    var page = 1;
    // dropload
    $('.product-list-ul').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            $.ajax({
                type: 'GET',
                url: "/touch/default/list?page="+page+"&cate=<?=$cate?>&tag=<?=$tag?>",
                dataType: 'json',
                success: function(res){
                    console.log(res)
                    if(res.code == 200){
                        var list = res.data.list;
                        var html = '';
                        for(var i = 0;i < list.length;i++){
                            var item = list[i];
                            html += '<a href="/book-item/'+item.number+'.html">';

                            html += '<img src="/img/120-160.png" style=" background:url(<?=$per_url?>'+item.thumb_img+'); background-size:cover">';
                            html += '<h3>'+item.front_title+'</h3>';

                            html += '</a>';
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 加载 插入到原有 DOM 之后
                            $('.product-list-ul li').append(html);
                            $(".dropload-down").remove();
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },500);
                        page = page + 1;
                    }else{
                        me.lock();
                        // 显示无数据
                        me.noData();
                        me.resetload();
                    }
                },
                error: function(xhr, type){
                    me.lock();
                    // 显示无数据
                    me.noData();
                    me.resetload();
                }
            });
        },
        threshold : 50
    });

</script>

